import { useEffect, useState, } from 'react'
import {Card,Table,Button} from "antd";
import type { SorterResult } from 'antd/es/table/interface';
import ExportToExcel from '@/pages/finance/Excel';
import type { GetProp, TableProps } from 'antd';
import { BorderOutlined } from "@ant-design/icons";
import { useSnapshot } from "valtio";
import { Finance1 } from "@/stores/Finance1";
type TablePaginationConfig = Exclude<GetProp<TableProps, 'pagination'>, boolean>;
interface TableParams {
  pagination?: TablePaginationConfig;
  sortField?: SorterResult<any>['field'];
  sortOrder?: SorterResult<any>['order'];
  filters?: Parameters<GetProp<TableProps, 'onChange'>>[1];
}
export default function WTables(props:any) {
    const [tableParams, setTableParams] = useState<TableParams>({
        pagination: {
          current: 1,
          pageSize: 2,
          pageSizeOptions: [2, 5, 10, 20, 50],
          showQuickJumper: true,
          showSizeChanger: true,
          showTitle: true,
        },
    });
    const handleTableChange: TableProps<any>['onChange'] = (pagination, filters, sorter) => {
        setTableParams({
          pagination,
          filters,
          sortOrder: Array.isArray(sorter) ? undefined : sorter.order,
          sortField: Array.isArray(sorter) ? undefined : sorter.field,
        });
        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
          // 重置页码
          pagination.current = 1;
          store.getList()
        }
    };
    useEffect(() => {
        
    },[ tableParams.pagination?.current,
        tableParams.pagination?.pageSize,
        tableParams?.sortOrder,
        tableParams?.sortField,
        JSON.stringify(tableParams.filters)])
    const store=useSnapshot(Finance1);
    return (
        <div>
            <Card title={props.title} text-gray-9 className='w-[92%] m-auto mt-10 min-w-[1000px]' extra={<div>
                <Button className="ml-5 color-gray"><BorderOutlined /><ExportToExcel data={props.data} fileName={props.title+"数据表"}></ExportToExcel></Button>
            </div>}>
                <Table bordered columns={props.columns} dataSource={props.data} size="middle" pagination={tableParams.pagination} onChange={handleTableChange} />
            </Card>
        </div>
    )
}
